<template>
  <div class="container_table">
    <div class="title">毕业设计选题</div>

    <!-- <x-switch title="right" v-model="show9"></x-switch> -->

    <div class="menu" @click="show=true">
      <i class="fa fa-bars"></i>
    </div>

    <table class="table table-striped tablelist">
      <thead>
        <tr class="table_title">
          <th>序号</th>
          <th>毕业设计题目</th>
          <th>指导老师</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(list, index) in tablelist"
          :key="index"
          @click="changetb(index,list.id)"
          :class="{tbcolor:i==index}"
        >
          <td>{{list.id}}</td>
          <td>{{list.title}}</td>
          <td>{{list.teacher}}</td>
          <!-- <td>{{list.stname}}</td> -->
        </tr>
      </tbody>
    </table>
    <div class="btn_group">
      <button type="button" class="btn btn-warning" @click="show2=true">查看毕业设计要求</button>
      <button type="button" class="btn btn-info btn1" @click="queren" :disabled="ismiss">确认选课</button>
    </div>

    <div v-transfer-dom>
      <popup v-model="show" position="right">
        <div style="width:200px;">
          <ul class="choose_li">
            <li @click="show1=true">
              <i class="fa fa-user"></i>
              个人信息
            </li>
            <li>
              <i class="fa fa-mortar-board"></i>
              重新选课
            </li>
            <li @click="logout">
              <i class="fa fa-sign-in"></i>
              退出系统
            </li>
          </ul>
        </div>
      </popup>
    </div>

    <div v-transfer-dom class="userinfo">
      <popup v-model="show1" position="bottom">
        <!-- <div class="overlay"></div> -->
        <group>
          <x-input title="姓名" v-model.trim="username" placeholder="请输入姓名"></x-input>
          <cell title="班级">
            <select name id v-model="classname">
              <option value="计算机一班">计算机一班</option>
              <option value="计算机二班">计算机二班</option>
              <option value="计算机三班">计算机三班</option>
              <option value="计算机四班">计算机四班</option>
              <option value="计算机五班">计算机五班</option>
            </select>
          </cell>

          <cell title="已选题目:">{{title}}</cell>
          <cell title="指导老师:">{{teacher}}</cell>
        </group>
        <div style="padding: 15px;">
          <x-button @click.native="save()" plain type="primary">保存</x-button>
        </div>
      </popup>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="show2" class="dialog-demo">
        <div class="text-box">
          <ul v-for="(course, index) in course" :key="index">
            <li class="num">序号:{{course.num}}</li>
            <li class="teacher">{{course.teacher}}</li>
            <li class="course_title">{{course.title}}</li>
            <li class="course_content">{{course.content}}</li>
          </ul>
        </div>
        <div class="close_but">
          <span class="fa fa-close"  @click="show2=false"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>


<script>
import { TransferDom, Popup, Group, Cell, XButton, XInput } from "vux";
import { PopupPicker, XDialog } from "vux";
import {
  getCourseList,
  getUserInfo,
  updateUserInfo,
  selectCourse,
  insertSid
} from "../api/public.js";
import { getToken, removeToken } from "../utils/auth.js";
export default {
  directives: {
    TransferDom
  },
  data() {
    return {
      namecode: getToken(),
      username: "",
      classname: "",
      show: false,
      show1: false,
      show2: false,
      i: -1,
      tablelist: [],
      id: "",
      title: "",
      teacher: "",
      ismiss: false,
      tbcolor: "",
      sid: "",
      course: [
        {
          num: 1,
          title: "横长很长的题目横长很长的题目横长很长的",
          teacher: "李老师",
          content: "为了部落，鲜血与雷鸣！力量与荣耀！你好看就能报，你长得帅就能报，你长得好看就能报"
        }
      ]
    };
  },
  mounted: function() {
    // 获取课程列表
    getCourseList().then(data => {
      const list = data.data;
      this.tablelist = list;
    });
    // 获取个人信息
    getUserInfo(this.namecode).then(res => {
      if (res.data.title !== null) this.ismiss = true;
      this.username = res.data.username;
      this.classname = res.data.classname;
      this.title = res.data.title;
      this.teacher = res.data.teacher;
    });
  },
  methods: {
    changetb(index, id) {
      this.i = index;
      this.id = id;
    },
    queren() {
      if (this.username === null || this.classname === null) {
        this.show1 = true;
      } else {
        // 选课课程ID
        selectCourse(this.namecode, this.id).then(res => {
          // 选课成功与否

          if (res.data.code === 200) {
            //  实时更新个人信息
            this.show1 = true;
            getUserInfo(this.namecode).then(res => {
              if (res.data.title !== null) this.ismiss = true;
              this.username = res.data.username;
              this.classname = res.data.classname;
              this.title = res.data.title;
              this.teacher = res.data.teacher;
              this.sid = res.data.id;
            });
            // 将学员信息添加到课程表中
            insertSid(this.id, this.namecode).then(res => {
              console.log(res);
            });
          }
        });
      }
    },
    ishow() {
      this.isok = !this.isok;
    },
    logout() {
      removeToken();
      this.$router.push({ path: "/login" });
    },
    userinfo() {},
    // 更新个人信息
    save() {
      updateUserInfo(this.namecode, this.username, this.classname).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.show1 = false;
        } else {
          this.show1 = true;
        }
      });
    }
  },

  components: {
    Popup,
    Group,
    Cell,
    XButton,
    XInput,
    XDialog
  }
};
</script>

<style>
/*
姓名  班级  课题  老师
*/

* {
  margin: 0;
  padding: 0;
}
.weui-cell__ft {
  color: black !important;
}
.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 500;
}
ul li {
  list-style-type: none;
}
.choose_li {
  font-size: 17px;
}
.fa {
  position: relative;
}

.choose_li li {
  height: 70px;
  line-height: 70px;
  padding-left: 30px;
  /* margin-top: 30px; */
}

.choose_li li:nth-of-type(2) {
  border-bottom: 1px solid black;
}

.menu {
  position: absolute;
  top: 15px;
  right: 40px;
}
.container_table .fa {
  /* color: #00a8ff; */
  font-size: 30px;
}

.title {
  text-align: center;
  font-size: 20px;
}
.btn_group {
  /* width: 140px; */
  margin: 5px auto;
  text-align: center;
}

/*
  表格数据样式
*/
.tbcolor {
  background: #c7ecee !important;
}
.container_table {
  margin: 10px;
}
.tablelist th {
  text-align: center;
}
.table_title {
  text-align: center;
  /* background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%); */
  background: #31bc86;
  color: white;
}
.tablelist td {
  text-align: center;
}
.tablelist {
  margin-top: 20px;
  border-radius: 10px;
}

/* dialog相关的遮罩内容 */

.dialog-demo .weui-dialog {
  border-radius: 8px;
  padding-bottom: 8px;
}
.dialog-demo .text-box {
  height: 400px;
  background: white;
  bottom: 0;
  overflow: hidden;
}
.dialog-demo .fa {
  font-size: 30px;
  text-align: center;
}
.dialog-demo .num {
  /* position: absolute; */
  margin-top: 30px;
  width: 110px;
  height: 30px;
  background: #ff6348;
  line-height: 30px;
  color: white;
}
.dialog-demo .teacher {
  text-align: left;
  padding: 15px;
  color: #333333;
  font-size: 18px;
  font-weight: 700;
}
.dialog-demo .course_title{
  padding: 0px 10px;
}
.dialog-demo .course_content{
  text-align: left;
  padding: 20px 5px 20px 10px;
  color: #666666;
  font-size: 18px;
}
.userinfo select{
  width: 200px;
  background: none;
  border: none;
}
</style>
